<template>
    <div class="features-section">
      <h2 class="title">产品特色 <span class="subtitle">Features</span></h2>
  
      <div
        class="feature"
        v-for="(item, index) in features"
        :key="index"
        :class="{ 'in-view': inView[index] }"
        ref="featureRefs"
      >
        <div class="feature-image">
          <img :src="item.img" alt="feature" />
        </div>
        <div class="feature-text">
          <h3>{{ item.title }}</h3>
          <p>{{ item.desc }}</p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, nextTick } from 'vue'
  
  const features = ref([
    {
      img: '/555.jpg',
      title: '权威全面的数据覆盖',
      desc: '对接官方数据，智能挖掘优势，利用海量已有数据不断迭代完善算法。'
    },
    {
      img: '/333.jpg',
      title: '专业智能的分类匹配',
      desc: '通过机器学习与自然语言处理，自动归属最优数据分类，行业数据模型可视化。'
    },
    {
      img: '/444.jpg',
      title: '高效便捷的数据下载',
      desc: '实现用户需要维度的自由选择，实时生成数据报表，支持图表文件下载。'
    }
  ])
  
  const featureRefs = ref([])
  const inView = ref([])
  
  onMounted(async () => {
    await nextTick()
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const index = featureRefs.value.indexOf(entry.target)
            if (index !== -1) {
              inView.value[index] = true
              observer.unobserve(entry.target)
            }
          }
        })
      },
      { threshold: 0.2 }
    )
  
    featureRefs.value.forEach((el) => observer.observe(el))
  })
  </script>
  
  <style scoped>
  .features-section {
    max-width: 1000px;
    margin: 60px auto;
    padding: 20px;
  }
  .title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 40px;
  }
  .subtitle {
    font-size: 14px;
    color: #888;
    margin-left: 6px;
  }
  .feature {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 20px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
  }
  .feature:nth-child(even) {
    flex-direction: row-reverse;
  }
  .feature.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  .feature-image img {
    width: 400px;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
  }
  .feature-text {
    flex: 1;
  }
  .feature-text h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .feature-text p {
    color: #555;
    line-height: 1.6;
  }
  </style>
  
  